<template>
  <view class="game-list-container">
    <text class="message-text">{{ content }}</text>
    <view class="game-list">
      <view 
        v-for="(game, index) in gameList" 
        :key="index"
        class="game-item"
        @click="handleGameClick(game)">
        <view class="game-info">
          <view class="game-name">🎮 {{ getGameName(game) }}</view>
          <view class="game-meta">
            <view class="game-type" v-if="game.type">{{ getGameTypeDisplay(game.type) }}</view>
            <view class="game-size" v-if="game.size">{{ game.size }}</view>
          </view>
          <view class="game-urls">
            <view class="url-item" v-if="game.publicUrl">
              <text class="url-label">公网：</text>
              <text class="url-text">{{ game.publicUrl }}</text>
            </view>
            <view class="url-item" v-if="game.lanUrl">
              <text class="url-label">局域网：</text>
              <text class="url-text">{{ game.lanUrl }}</text>
            </view>
          </view>
        </view>
        <view class="download-icon">
          <uni-icons type="download" size="18" color="#007aff"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'GameList',
  props: {
    content: {
      type: String,
      default: ''
    },
    gameList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getGameName(game) {
      if (game.name && game.name.trim() !== '') {
        return game.name
      }
      
      if (game.id) {
        return `游戏 #${game.id}`
      }
      
      try {
        const url = game.publicUrl || game.lanUrl
        if (url) {
          const urlObj = new URL(url)
          const pathParts = urlObj.pathname.split('/')
          const filename = pathParts[pathParts.length - 1]
          if (filename && filename !== '') {
            const nameWithoutExt = filename.split('.')[0]
            return nameWithoutExt || '未知游戏'
          }
        }
      } catch (e) {
        console.log('无法从 URL 提取游戏名称')
      }
      
      return '未知游戏'
    },
    
    // 获取游戏类型显示
    getGameTypeDisplay(type) {
      const gameTypes = {
        'gba': 'GBA游戏',
        'psp': 'PSP游戏', 
        'exe': 'PC游戏',
        'apk': 'Android游戏',
        'ipa': 'iOS游戏',
        'nds': 'NDS游戏',
        'ps1': 'PS1游戏',
        'ps2': 'PS2游戏',
        'n64': 'N64游戏',
        'snes': 'SNES游戏',
        'nes': 'FC游戏',
        'gbc': 'GBC游戏',
        'gb': 'GB游戏',
        'md': 'MD游戏',
        'arcade': '街机游戏',
        'steam': 'Steam游戏',
        'switch': 'Switch游戏'
      }
      
      return gameTypes[type.toLowerCase()] || type.toUpperCase()
    },
    
    handleGameClick(game) {
      this.$emit('game-click', game)
    }
  }
}
</script>

<style lang="scss" scoped>
.game-list-container {
  width: 100%;
}

.message-text {
  font-size: 16px;
  line-height: 1.4;
  word-wrap: break-word;
}

.game-list {
  margin-top: 10px;
}

.game-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin: 8px 0;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  cursor: pointer;
  transition: all 0.2s ease;
}

.game-item:hover {
  background-color: #e8f5e8;
  border-color: #28a745;
}

.game-item:active {
  transform: scale(0.98);
}

.game-info {
  flex: 1;
}

.game-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
  line-height: 1.3;
}

.game-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.game-type {
  font-size: 10px;
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 500;
  text-transform: uppercase;
}

.game-size {
  font-size: 10px;
  color: #888;
  background-color: rgba(40, 167, 69, 0.1);
  padding: 2px 6px;
  border-radius: 8px;
}

.game-urls .url-item {
  margin: 2px 0;
}

.url-label {
  font-size: 11px;
  color: #495057;
  font-weight: 500;
  margin-right: 4px;
}

.url-text {
  font-size: 11px;
  color: #6c757d;
  word-break: break-all;
  line-height: 1.2;
}

.download-icon {
  margin-left: 10px;
  padding: 4px;
  border-radius: 4px;
  background-color: rgba(40, 167, 69, 0.1);
}
</style>